[#65618] Remove jQuery from core #19429

myabc · 2025-07-06T17:23:47Z

⚠️ ~~This PR includes commits from #20846. Please review/merge that first.~~

Ticket

https://community.openproject.org/wp/65618

What are you trying to accomplish?

Remove jQuery calls from most parts of the core OpenProject codebase.

While jQuery was revolutionary when it was first released, it is an obsolete technology. Nearly all of jQuery's functionality can be replaced by newer Web APIs.

This PR removes jQuery dependencies from the OpenProject core codebase, replacing jQuery APIs with native DOM APIs and modern JavaScript/TypeScript alternatives. The changes include migrating event listeners, DOM manipulation, element selection, CSS manipulation, and AJAX operations away from jQuery while maintaining the same functionality.

Key changes:

Replace jQuery selectors with document.querySelector/querySelectorAll
Replace jQuery event binding (.on(), .off()) with native addEventListener/removeEventListener:
- jQuery's event delegation has been replaced with delegate
- jQuery's event namespacing has been replaced with our own implementation (see frontend/src/app/shared/helpers/event-helpers.ts)
Replace jQuery DOM manipulation methods with native alternatives
Update type definitions from JQuery.TriggeredEvent to native Event, MouseEvent, KeyboardEvent.
Remove jQuery from csp_onclick Rails helper.
Remove some inline jQuery from views - replacing with inline scripts that use DOM APIs or directly with Stimulus, depending on ease of conversion/inferred likelihood of module being supported in the future. (follow up PR [#68734] Migrate legacy Settings JS/TS to Stimulus #20884 takes this further)
Remove some .js.erb files that no longer appear to be in use.

Screenshots

There should not be any significant visual changes.

What approach did you choose and why?

Work on this PR was started a couple months back and then put on hold. Originally I had planned to migrate the codebase to Luxon (#19379) first), but I realised that jQuery should probably take priority and so decoupled the two pieces of work.

Migrating from jQuery was mostly grunt work in the first phase - search and replace (with various weird Regexes) based on my own knowledge. However this PR has had many passes that have involved both me checking my work and Copilot reviewing. Copilot coding agent has also worked on some fixes (e.g. #20909, #20908, #20906). Fixing the final 50 or so failing tests took the most time and involved running feature specs headful (e.g. OPENPROJECT_TESTING_AUTO_DEVTOOLS=true OPENPROJECT_TESTING_NO_HEADLESS=1 bundle exec rspec ./spec/features/work_packages/export_spec.rb) and manual debugging.

Scope

Follow up PRs

These PRs can be reviewed separately, but are based on this PR and should be merged after it. Work was split out for ease of review (this PR is already huge) and/or not being strictly in scope.

What this PR does not do

This work package will not remove the jQuery dependency or global. This is to give us more time to test plugins and because there are still some modules with a jQuery requirement: BIM, Reporting (used in a few places), and Backlogs (used extensively).

There are already related (WIP) Pull Requests for Reporting and Backlogs:

#Migrate Backlogs to JavaScript classes, type improvements #19907 (preparation for OP #68795)
#[#68462] Migrate ReportingWidgets to ViewComponent #20650

I didn't fix (many) eslint issues on existing code (Copilot worked on follow up PR that #20939 fixes some issues) or perform any Angular migrations (these should be done separately).

Other things this PR does

#[#68740] Fix Repository Revision compare radios #20886 - I originally made this fix as part of this PR, but then extracted it into its own PR.
implements getMetaElement, getMetaValue and getMetaContent helper functions.

Merge checklist

Note for reviewers: this is a huge PR and there are a lot of comments. I've marked questions and things I was unsure about with "Check". These could do with a human review!

Copilot

Pull Request Overview

This PR removes jQuery dependencies from the OpenProject core codebase, replacing jQuery APIs with native DOM APIs and modern JavaScript/TypeScript alternatives. The changes include migrating event listeners, DOM manipulation, element selection, CSS manipulation, and AJAX operations away from jQuery while maintaining the same functionality.

Key changes:

Replace jQuery selectors with document.querySelector/querySelectorAll
Replace jQuery event binding (.on(), .off()) with native addEventListener/removeEventListener
Replace jQuery DOM manipulation methods with native alternatives
Update type definitions from JQuery.TriggeredEvent to native Event, MouseEvent, KeyboardEvent

Reviewed Changes

Copilot reviewed 138 out of 139 changed files in this pull request and generated 25 comments.

Show a summary per file

File	Description
frontend/package.json	Adds dependencies for jQuery-free event delegation (`@knowledgecode/delegate`) and slide animations (`es6-slide-up-down`)
frontend/src/app/shared/helpers/dom-helpers.ts	New utility module providing jQuery-like helper functions using native DOM APIs
modules/*/frontend/module/git-actions-menu/git-actions-menu.directive.ts	Updates event type from `JQuery.TriggeredEvent` to `Event`
modules/budgets/frontend/module/augment/planned-costs-form.ts	Replaces jQuery event delegation with `@knowledgecode/delegate` library
frontend/src/turbo/turbo-global-listeners.ts	Replaces jQuery `.each()` with native `forEach()`
frontend/src/app/shared/helpers/link-handling/link-handling.ts	Updates event type from `JQuery.TriggeredEvent` to `MouseEvent`
frontend/src/app/shared/helpers/drag-and-drop/dom-autoscroll.service.ts	Replaces jQuery event binding with native `addEventListener`
frontend/src/app/shared/directives//.ts	Multiple directive files updating from jQuery element references to native HTMLElement
frontend/src/app/shared/components//.ts	Component files migrating from jQuery to native DOM APIs for element manipulation and event handling
frontend/src/app/features/work-packages/components/wp-table/*.ts	Work package table components replacing jQuery with native DOM operations
frontend/src/app/features/calendar/*.ts	Calendar components removing jQuery tooltip and DOM manipulation calls
frontend/src/app/core/setup/globals/*.ts	Global listener setup replacing jQuery with native event handling

Files not reviewed (1)

frontend/package-lock.json: Language not supported

frontend/src/app/shared/helpers/dom-helpers.ts

frontend/src/app/shared/helpers/drag-and-drop/dom-autoscroll.service.ts

frontend/src/app/core/setup/globals/global-listeners/settings.ts

frontend/src/app/core/setup/globals/global-listeners/danger-zone-validation.ts

frontend/src/app/core/setup/globals/global-listeners/setup-server-response.ts

frontend/src/app/core/top-menu/top-menu.service.ts

...p/features/work-packages/components/wp-fast-table/builders/relations/relation-row-builder.ts

frontend/src/app/features/work-packages/components/wp-fast-table/handlers/row/click-handler.ts

frontend/src/app/core/main-menu/main-menu-toggle.service.ts

frontend/src/app/core/setup/globals/global-listeners/setup-server-response.ts

frontend/src/app/features/calendar/te-calendar/te-calendar.component.ts

...tend/src/app/shared/components/op-context-menu/handlers/op-context-menu-trigger.directive.ts

frontend/src/app/shared/components/op-context-menu/op-context-menu.service.ts

frontend/src/app/features/boards/board/add-card-dropdown/add-card-dropdown-menu.directive.ts

...tend/src/app/shared/components/op-context-menu/handlers/op-columns-context-menu.directive.ts

...tend/src/app/shared/components/op-context-menu/handlers/op-context-menu-trigger.directive.ts

...nd/src/app/shared/components/op-context-menu/handlers/op-settings-dropdown-menu.directive.ts

...tend/src/app/shared/components/op-context-menu/handlers/wp-create-settings-menu.directive.ts

...ponents/op-context-menu/icon-triggered-context-menu/icon-triggered-context-menu.component.ts

frontend/src/app/shared/components/op-context-menu/wp-context-menu/wp-single-context-menu.ts

.../src/app/shared/components/op-context-menu/wp-context-menu/wp-view-context-menu.directive.ts

frontend/src/app/shared/components/op-context-menu/op-context-menu-handler.ts

myabc · 2025-11-05T16:27:07Z

frontend/src/app/core/setup/globals/global-listeners/action-menu.ts

+      dropDown.querySelector<HTMLAnchorElement>('li > a:first-child')?.focus();
      // when clicking on something, which is not the menu, close the menu
-      jQuery('html').on('click', { menu: menu.get(0) }, closeMenu);
+      document.addEventListener('click', (evt) => closeMenu(menu, evt), { once: true });


Human: ⚠️ check

@copilot check this code has been ported correctly.

Copilot · 2025-11-05T16:27:22Z

@myabc I've opened a new pull request, #20941, to work on those changes. Once the pull request is ready, I'll request review from you.

myabc · 2025-11-05T16:29:25Z

frontend/src/app/features/calendar/te-calendar/te-calendar.component.ts

+    // TODO: port tooltips
+    // jQuery(event.el).tooltip({
+    //   content: this.tooltipContentString(event.event.extendedProps.entry as TimeEntryResource, schema),
+    //   items: '.fc-event',
+    //   close() {
+    //     document.querySelectorAll('.ui-helper-hidden-accessible').forEach(element => element.remove());
+    //   },
+    //   track: true,
+    // });
  }


⚠️ Check. I couldn't figure out how to test this in the UI.

myabc · 2025-11-05T16:30:51Z

frontend/src/app/features/calendar/te-calendar/te-calendar.component.ts

-    fadeout.css('background', `-webkit-linear-gradient(${hslaStart} 0%, ${hslaEnd} 100%`);
+    fadeout.style.background = `-webkit-linear-gradient(${hslaStart} 0%, ${hslaEnd} 100%`;

    ['-moz-linear-gradient', '-o-linear-gradient', 'linear-gradient', '-ms-linear-gradient'].forEach((style) => {
-      fadeout.css('background-image', `${style}(${hslaStart} 0%, ${hslaEnd} 100%`);
+      fadeout.style.backgroundImage = `${style}(${hslaStart} 0%, ${hslaEnd} 100%`;
    });


@copilot These vendor prefixes should no longer be necessary. Please create a PR to remove them.

Copilot · 2025-11-05T16:31:05Z

@myabc I've opened a new pull request, #20942, to work on those changes. Once the pull request is ready, I'll request review from you.

myabc · 2025-11-05T16:37:32Z

frontend/src/app/features/work-packages/components/wp-edit-form/table-edit-form.ts

-        const td = this.findCell(fieldName);
-        td.addClass(editModeClassName);
-        let width = parseInt(td.css('width'));
+        const td = this.findCell(fieldName)!;


⚠️ Check: not null assertion

myabc · 2025-11-05T16:38:47Z

...p/features/work-packages/components/wp-fast-table/builders/relations/relation-row-builder.ts


-    jRow.find(`.${relationCellClassName}`).empty();
-    jRow.find(`.${relationCellClassName}.${columnId}`).append(relationLabel);
+    row.querySelector(`.${relationCellClassName}`)!.innerHTML = '';


⚠️ check

myabc · 2025-11-05T16:44:36Z

...ures/work-packages/components/wp-table/timeline/container/wp-timeline-container.directive.ts

    // B: calculate the minimal width based on the window width
-    const width = this.$element.children().width()!; // A
-    // const width = jQuery('body').width(); // B
+    const width = this.element.children[0]?.clientWidth || document.body.clientWidth; // A with fallback to B


⚠️ check I got this wrong first time round. #20847 (merged) should have fixed it.

myabc · 2025-11-05T16:45:17Z

...p/features/work-packages/components/wp-table/timeline/header/wp-timeline-header.directive.ts


  refreshView(vp:TimelineViewParameters) {
-    this.innerHeader = this.$element.find('.wp-table-timeline--header-inner');
+    this.innerHeader = this.element.querySelector('.wp-table-timeline--header-inner')!;


⚠️ check not null assertion

frontend/src/app/shared/components/fields/display/display-field-renderer.ts

Copilot · 2025-11-05T16:50:44Z

@myabc I've opened a new pull request, #20944, to work on those changes. Once the pull request is ready, I'll request review from you.

myabc · 2025-11-05T16:55:40Z

frontend/src/app/shared/components/op-context-menu/op-context-menu.service.ts

+    requestAnimationFrame(() => {
+      if (!this.active || this.openSeq !== seq) {
+        this.isOpening = false;
+        return;
+      }
+
+      void this.reposition(event)
+        .then(() => {
+          if (this.active && this.openSeq === seq) {
+            hostEl.style.visibility = 'visible';
+            requestAnimationFrame(() => {
+              // Defer onOpen to next frame to ensure styles are applied
+              if (this.active && this.openSeq === seq) {
+                this.active.onOpen(this.activeMenu);
+              }
+            });
+          }
+        })
+        .catch((err) => {
+          // Fail-safe: close if positioning fails
+          console.error('Context menu positioning failed:', err);
+          if (this.openSeq === seq) this.close();
+        })
+        .finally(() => {
+          if (this.openSeq === seq) this.isOpening = false;
+        });


⚠️ Check the goal here was to await reposition (which now returns a Promise) and then schedule focussing in the next frame. I've added in guards against possible race conditions, but can't help feel this is a tad defensive.
See separate PR #20923 where I worked on this, rubber ducking with Copilot.

myabc · 2025-11-05T16:56:52Z

frontend/src/app/shared/components/persistent-toggle/persistent-toggle.component.ts

-        this.$targetNotification.prop('hidden', true);
-      });
+      slideUp(targetNotification, 400);
+      setTimeout(() => { targetNotification.hidden = true; }, 400);


Ideally slideUp would set hidden for us.

myabc · 2025-11-05T17:00:53Z

frontend/src/app/shared/directives/op-drag-scroll/op-drag-scroll.directive.ts

-        y: evt.clientY - mousedownY,
-      });
+      element.dispatchEvent(
+        new CustomEvent('op:dragscroll', {


⚠️ Check are we even listening for op:dragscroll anywhere?

modules/costs/app/views/admin/cost_types/_list.html.erb

Co-authored-by: myabc <[email protected]>

HDinger

Wow, what a PR 🤯 🌟 Well done 👍 👏
I have two inline remarks where I was not sure, about the implications. However, honestly spoken, the PR is too big for a real code review. 🙈
From the things you listed, the biggest uncertaincy is for sure the positioning of menus, since there are basically no tests for that. The rest is (hopefully) more or less well covered. So it would be good if the Tests were green. Regarding the positioning, I couldn't find any issue however 🤷
I nevertheless would like to wait for @cguiot-OP feedback on the PR.

I did find one bug, which is however not a blocker for me and can be tackled separately: Once you save a form configuration, you cannot drag and drop any more. You have to do a hard reload, then it works again.

HDinger · 2025-11-06T08:03:24Z

frontend/src/app/features/calendar/te-calendar/te-calendar.component.ts

+    // TODO: port tooltips
+    // jQuery(event.el).tooltip({
+    //   content: this.tooltipContentString(event.event.extendedProps.entry as TimeEntryResource, schema),
+    //   items: '.fc-event',
+    //   close() {
+    //     document.querySelectorAll('.ui-helper-hidden-accessible').forEach(element => element.remove());
+    //   },
+    //   track: true,
+    // });
  }

  private removeTooltip(event:CalendarViewEvent):void {
-    const target = jQuery(event.el);
-
-    if (target.tooltip('instance')) {
-      jQuery(event.el).tooltip('disable');
-    }
+    // TODO: port tooltips


What about these Todos?

I can't find how to show these tooltips.

I guess this could be tackled in a follow up.

HDinger · 2025-11-06T08:05:15Z

.../src/app/features/work-packages/components/wp-card-view/event-handler/right-click-handler.ts

-  public get EVENT() {
-    return 'contextmenu.cardView.rightclick';
+  public get EVENT():EventType {
+    return 'contextmenu'; // N.B.: contextmenu is not supported by Safari on iOS.


What does that comment mean? Is right click not supported on iOS Safari any more?

@HDinger Good question. rightclick is a jQuery only event AFAICT (I actually can't find any docs for it though) - perhaps @oliverguenther knows?. contextmenu is a new-ish event that fires once the click is processed, but as stated isn't supported by iOS Safari. https://developer.mozilla.org/en-US/docs/Web/API/Element/contextmenu_event

In addition to right-clicking, it also is fired when users open the context menu via keyboard, which may mean (ContextMenuKeyboardHandler is redundant?)

The lack of iOS Safari support may be a moot point - as I'm not sure if we need context menus on mobile anyway?

That does remind me that we should also do smoke testing on mobile. @cguiot-OP do we support context menus on mobile?

myabc · 2025-11-06T11:52:56Z

So it would be good if the Tests were green

@HDinger The tests should be green. I think the current failure is a flickering test, so I'll restart.

There are eslint failures, which I've tackled over in #20939.

cguiot-OP · 2025-11-06T11:53:04Z

@myabc i only looked into the pointers from the WP description and didn't find anything else than what @HDinger mentioned above so i would say it can be merged.

myabc changed the title ~~Code maintenance/rid jquery~~ [#65618] Remove jQuery from core Jul 8, 2025

myabc added maintenance DO NOT MERGE javascript Pull requests that update Javascript code labels Jul 8, 2025

myabc force-pushed the code-maintenance/luxon branch from 28d3b33 to dabe404 Compare July 15, 2025 10:45

myabc force-pushed the code-maintenance/rid-jquery branch from 8ecb545 to c7be23c Compare July 15, 2025 10:57

myabc force-pushed the code-maintenance/luxon branch from dabe404 to 12c2e01 Compare July 23, 2025 16:15

myabc force-pushed the code-maintenance/luxon branch 8 times, most recently from 8c63a12 to 5d26905 Compare September 28, 2025 22:45

myabc force-pushed the code-maintenance/luxon branch 2 times, most recently from af9f3f5 to 84518cd Compare October 28, 2025 11:46

myabc force-pushed the code-maintenance/rid-jquery branch from c7be23c to c0ad5e2 Compare October 28, 2025 13:13

myabc requested a review from Copilot October 28, 2025 13:14

myabc changed the base branch from code-maintenance/luxon to dev October 28, 2025 13:15

Copilot AI reviewed Oct 28, 2025

View reviewed changes

myabc commented Oct 28, 2025

View reviewed changes

...p/features/work-packages/components/wp-fast-table/builders/relations/relation-row-builder.ts Show resolved Hide resolved

myabc commented Oct 28, 2025

View reviewed changes

frontend/src/app/features/work-packages/components/wp-fast-table/handlers/row/click-handler.ts Outdated Show resolved Hide resolved

myabc force-pushed the code-maintenance/rid-jquery branch from c0ad5e2 to 07e86f2 Compare October 28, 2025 18:31

github-advanced-security bot found potential problems Oct 28, 2025

View reviewed changes

myabc force-pushed the code-maintenance/rid-jquery branch from 0b5ff43 to 24f8775 Compare October 28, 2025 20:57

github-advanced-security bot found potential problems Oct 28, 2025

View reviewed changes

myabc force-pushed the code-maintenance/rid-jquery branch from 24f8775 to 9e4b33c Compare October 28, 2025 22:59

myabc requested a review from Copilot October 28, 2025 23:00

github-advanced-security bot found potential problems Oct 28, 2025

View reviewed changes

frontend/src/app/shared/components/op-context-menu/op-context-menu-handler.ts Fixed Show fixed Hide fixed

myabc commented Nov 5, 2025

View reviewed changes

Copilot AI mentioned this pull request Nov 5, 2025

Fix event listener cleanup in action-menu jQuery removal #20941

Merged

myabc commented Nov 5, 2025

View reviewed changes

Copilot AI mentioned this pull request Nov 5, 2025

Remove obsolete vendor prefixes from calendar gradient rendering #20942

Merged

myabc commented Nov 5, 2025

View reviewed changes

frontend/src/app/shared/components/fields/display/display-field-renderer.ts Outdated Show resolved Hide resolved

Copilot AI mentioned this pull request Nov 5, 2025

Use DOMParser for HTML text extraction in display field renderer #20944

Merged

myabc commented Nov 5, 2025

View reviewed changes

modules/costs/app/views/admin/cost_types/_list.html.erb Show resolved Hide resolved

Copilot AI and others added 2 commits November 5, 2025 17:16

Replace innerHTML approach with DOMParser for HTML text extraction

78834a5

Co-authored-by: myabc <[email protected]>

Remove unnecessary vendor prefixes from calendar gradient

cdf1586

Co-authored-by: myabc <[email protected]>

myabc mentioned this pull request Nov 5, 2025

Migrate Backlogs to JavaScript classes, type improvements #19907

Draft

3 tasks

HDinger reviewed Nov 6, 2025

View reviewed changes

HDinger requested a review from cguiot-OP November 6, 2025 08:17

cguiot-OP approved these changes Nov 6, 2025

View reviewed changes

myabc merged commit 6d78d7e into dev Nov 6, 2025
19 of 21 checks passed

myabc deleted the code-maintenance/rid-jquery branch November 6, 2025 12:18

github-actions bot locked and limited conversation to collaborators Nov 6, 2025

github-actions bot removed the pullpreview label Nov 6, 2025

[#65618] Remove jQuery from core #19429

[#65618] Remove jQuery from core #19429

Uh oh!

Conversation

myabc commented Jul 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Ticket

What are you trying to accomplish?

Screenshots

What approach did you choose and why?

Scope

Follow up PRs

What this PR does not do

Other things this PR does

Merge checklist

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI commented Nov 5, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI commented Nov 5, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI commented Nov 5, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

HDinger left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

myabc commented Jul 6, 2025 •

edited

Loading

HDinger left a comment •

edited

Loading